<template>
	<view class="container">

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 退款信息卡片 -->
			<view class="info-card">
				<!-- 申请退款金额 -->
				<view class="info-item">
					<text class="info-label">申请退款金额</text>
					<text class="info-value amount">¥{{ refundInfo.detail.refund_apply_money }}</text>
				</view>

				<!-- 退款方式 -->
				<view class="info-item">
					<text class="info-label">退款方式</text>
					<view class="refund-method">
						<picker :range="refundMethods" range-key="name" @change="refundMethodChange">
							<view class="picker-selected">
								<text class="method-text">{{ refundMethods[refundMethod].name }}</text>
								<uni-icons type="right" size="14" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>

				<!-- 退款说明 -->
				<view class="info-item">
					<text class="info-label">退款说明</text>
				</view>
				<view class="input-wrapper">
					<textarea class="refund-description" placeholder="请输入退款说明" placeholder-class="placeholder-text"
						v-model="refundDescription"></textarea>
				</view>
			</view>
		</view>

		<!-- 底部按钮组 -->
		<view class="button-group">
			<button class="cancel-btn" @tap="cancelTransfer">取消</button>
			<button class="confirm-btn" @tap="confirmTransfer">确认</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			refundDescription: '', // 退款说明
			refundMethods: [
				{ id: 1, name: '原路退款' },
				{ id: 2, name: '线下退款' }
			],
			refundInfo: {},
			order_goods_id: '',
			refundMethod:0,
		}
	},
	onLoad(options) {
		this.order_goods_id = options.id;
		this.init();
	},
	methods: {
		// 初始化页面数据
		init() {
			console.log(this.order_goods_id);
			this.$api.sendRequest({
				url: '/api/admin/detail',
				data: {
					order_goods_id: this.order_goods_id
				},
				success: res => {
					console.log(res.data);
					this.refundInfo = res.data;
				} 
			});
		},

		// 取消转账
		cancelTransfer() {
			uni.navigateBack()
		},

		// 退款方式变更处理
		refundMethodChange(e) {
			const index = e.detail.value;
			this.refundMethod = index;
		},

		// 确认转账
		confirmTransfer() {
			this.$api.sendRequest({
				url: '/api/admin/complete',
				data: {
					order_goods_id: this.order_goods_id,
					refund_money_type: this.refundMethods[this.refundMethod].id,
					shop_refund_remark: this.refundDescription,
					refund_real_money: this.refundInfo.detail.refund_apply_money,
				},
				success: res => {
					if (res.code >= 0) {
						uni.showToast({
							title: '转账成功',
							icon: 'success',
							duration: 2000
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}
			});

		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.header {
	height: 44px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #eeeeee;
	position: relative;
}

.header-title {
	font-size: 16px;
	font-weight: 500;
	color: #333333;
}

.content {
	flex: 1;
	padding: 16px;
}

.info-card {
	background-color: #ffffff;
	border-radius: 8px;
	padding: 16px;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 14px;
	color: #666666;
}

.info-value {
	font-size: 14px;
	color: #333333;
}

.amount {
	font-size: 18px;
	font-weight: 600;
	color: #ff6b35;
}

.refund-method {
	display: flex;
	align-items: center;
}

.picker-selected {
	display: flex;
	align-items: center;
}

.method-text {
	font-size: 14px;
	color: #333333;
	margin-right: 4px;
}

.input-wrapper {
	margin-top: 8px;
}

.refund-description {
	width: 100%;
	min-height: 100px;
	padding: 12px;
	font-size: 14px;
	color: #333333;
	background-color: #f9f9f9;
	border: 1px solid #eeeeee;
	border-radius: 6px;
	box-sizing: border-box;
	resize: none;
}

.placeholder-text {
	color: #999999;
}

.button-group {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #ffffff;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
	position: sticky;
	bottom: 20rpx;
	z-index: 5;
}

.cancel-btn,
.confirm-btn {
	flex: 1;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50rpx;
	font-size: 34rpx;
	margin: 0 15rpx;
	font-weight: bold;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

// 取消按钮样式优化
.cancel-btn {
	background-color: #ffffff;
	color: #666666;
	border: 2rpx solid #e0e0e0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

// 确认按钮样式优化
.confirm-btn {
	background: linear-gradient(135deg, #ff6b35 0%, #ff7e54 100%);
	color: #ffffff;
	border: none;
	box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}
</style>